<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的参数问题</title>
</head>
<body>
<div id="app">

  <!--1.事件监听调用的方法没有参数，那么事件绑定的方法后边可以不加括号-->
  <button @click="btn1Click()">按钮1带括号</button>
  <button @click="btn1Click">按钮1不带括号</button>
  <hr>
  <!--2.事件监听的方法有一个参数-->
  <!--(1)事件监听调用时传入参数，那么方法正常打印这个参数，结果：'---------- 123'-->
  <button @click="btn2Click(123)">按钮2传入参数</button>
  <!--(2)事件监听调用时不传入参数，但是带上括号，那么方法将这个参数视为undefined，结果：'---------- undefined'-->
  <button @click="btn2Click()">按钮2不传入参数，但是带上括号</button>
  <!--(3)事件监听调用时不传入参数，也不带括号，那么vue会默认将浏览器生成的event事件作为参数传入方法，结果：'----------',MouseEvent{}-->
  <button @click="btn2Click">按钮2不传入参数，也不带括号</button>
  <hr>

  <!--3.事件监听的方法有多个参数，但是方法里需要一个event对象-->
  <!--在事件调用时，其他参数正常传入，需要event对象的参数传入$event,vue会将传入的$event解析为浏览器生成的event对象 -->
  <button @click="btn3Click(123,$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    methods: {
      btn1Click() {
        console.log('点击了按钮1 btn1Click');
      },
      btn2Click(param) {
        console.log('----------', param);
      },
      btn3Click(param, event) {
        console.log('++++++++++', param, event);
      }
    }
  });
</script>
</body>
</html>
